<template>
  <div class="chart-container">
    <div class="chart-header">
      <h4>{{ title }}</h4>
      <div class="chart-actions">
        <el-button size="small" @click="refreshChart">刷新</el-button>
        <el-button size="small" @click="$emit('edit')">编辑</el-button>
      </div>
    </div>
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '折线图'
  },
  data: {
    type: Array,
    default: () => []
  },
  config: {
    type: Object,
    default: () => ({
      xField: '',
      yField: '',
      color: '#67C23A'
    })
  }
})

const emit = defineEmits(['edit'])

const chartRef = ref(null)

// 简单的SVG折线图实现
const renderChart = () => {
  if (!chartRef.value || !props.data.length) return

  const container = chartRef.value
  container.innerHTML = ''

  const width = container.clientWidth || 400
  const height = container.clientHeight || 300
  const margin = { top: 20, right: 20, bottom: 40, left: 60 }
  const chartWidth = width - margin.left - margin.right
  const chartHeight = height - margin.top - margin.bottom

  // 创建SVG
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  svg.setAttribute('width', width)
  svg.setAttribute('height', height)
  svg.style.background = '#fff'

  // 获取数据
  const xField = props.config.xField
  const yField = props.config.yField

  if (!xField || !yField) {
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    text.setAttribute('x', width / 2)
    text.setAttribute('y', height / 2)
    text.setAttribute('text-anchor', 'middle')
    text.setAttribute('fill', '#909399')
    text.textContent = '请配置X轴和Y轴字段'
    svg.appendChild(text)
    container.appendChild(svg)
    return
  }

  const data = props.data.filter(item => item[xField] && item[yField])
  if (!data.length) {
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    text.setAttribute('x', width / 2)
    text.setAttribute('y', height / 2)
    text.setAttribute('text-anchor', 'middle')
    text.setAttribute('fill', '#909399')
    text.textContent = '暂无数据'
    svg.appendChild(text)
    container.appendChild(svg)
    return
  }

  // 计算比例
  const maxValue = Math.max(...data.map(d => Number(d[yField]) || 0))
  const minValue = Math.min(...data.map(d => Number(d[yField]) || 0))

  // 绘制坐标轴
  const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line')
  xAxis.setAttribute('x1', margin.left)
  xAxis.setAttribute('y1', height - margin.bottom)
  xAxis.setAttribute('x2', width - margin.right)
  xAxis.setAttribute('y2', height - margin.bottom)
  xAxis.setAttribute('stroke', '#e4e7ed')
  svg.appendChild(xAxis)

  const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line')
  yAxis.setAttribute('x1', margin.left)
  yAxis.setAttribute('y1', margin.top)
  yAxis.setAttribute('x2', margin.left)
  yAxis.setAttribute('y2', height - margin.bottom)
  yAxis.setAttribute('stroke', '#e4e7ed')
  svg.appendChild(yAxis)

  // 计算点的位置
  const points = data.map((item, index) => {
    const x = margin.left + (index / (data.length - 1)) * chartWidth
    const value = Number(item[yField]) || 0
    const y = height - margin.bottom - (value / maxValue) * chartHeight
    return { x, y, value, item }
  })

  // 绘制折线
  if (points.length > 1) {
    const pathData = points.map((point, index) => {
      return `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`
    }).join(' ')

    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    path.setAttribute('d', pathData)
    path.setAttribute('stroke', props.config.color || '#67C23A')
    path.setAttribute('stroke-width', '2')
    path.setAttribute('fill', 'none')
    svg.appendChild(path)
  }

  // 绘制数据点
  points.forEach((point, index) => {
    // 数据点
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
    circle.setAttribute('cx', point.x)
    circle.setAttribute('cy', point.y)
    circle.setAttribute('r', '4')
    circle.setAttribute('fill', props.config.color || '#67C23A')
    circle.setAttribute('stroke', '#fff')
    circle.setAttribute('stroke-width', '2')
    circle.style.cursor = 'pointer'
    
    // 添加悬停效果
    circle.addEventListener('mouseenter', () => {
      circle.setAttribute('r', '6')
    })
    circle.addEventListener('mouseleave', () => {
      circle.setAttribute('r', '4')
    })
    
    svg.appendChild(circle)

    // X轴标签
    const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    xLabel.setAttribute('x', point.x)
    xLabel.setAttribute('y', height - margin.bottom + 15)
    xLabel.setAttribute('text-anchor', 'middle')
    xLabel.setAttribute('font-size', '12')
    xLabel.setAttribute('fill', '#606266')
    xLabel.textContent = String(point.item[xField]).substring(0, 8)
    svg.appendChild(xLabel)

    // 数值标签
    const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    valueLabel.setAttribute('x', point.x)
    valueLabel.setAttribute('y', point.y - 10)
    valueLabel.setAttribute('text-anchor', 'middle')
    valueLabel.setAttribute('font-size', '11')
    valueLabel.setAttribute('fill', '#303133')
    valueLabel.textContent = point.value.toLocaleString()
    svg.appendChild(valueLabel)
  })

  // Y轴标签
  const ySteps = 5
  for (let i = 0; i <= ySteps; i++) {
    const value = (maxValue / ySteps) * i
    const y = height - margin.bottom - (chartHeight / ySteps) * i

    const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    yLabel.setAttribute('x', margin.left - 10)
    yLabel.setAttribute('y', y + 4)
    yLabel.setAttribute('text-anchor', 'end')
    yLabel.setAttribute('font-size', '11')
    yLabel.setAttribute('fill', '#606266')
    yLabel.textContent = Math.round(value).toLocaleString()
    svg.appendChild(yLabel)

    // 网格线
    if (i > 0) {
      const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
      gridLine.setAttribute('x1', margin.left)
      gridLine.setAttribute('y1', y)
      gridLine.setAttribute('x2', width - margin.right)
      gridLine.setAttribute('y2', y)
      gridLine.setAttribute('stroke', '#f5f7fa')
      gridLine.setAttribute('stroke-dasharray', '2,2')
      svg.appendChild(gridLine)
    }
  }

  container.appendChild(svg)
}

const refreshChart = () => {
  nextTick(() => {
    renderChart()
  })
}

onMounted(() => {
  renderChart()
})

watch(() => [props.data, props.config], () => {
  renderChart()
}, { deep: true })
</script>

<style scoped>
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.chart-header h4 {
  margin: 0;
  font-size: 14px;
  color: #303133;
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.chart-content {
  flex: 1;
  min-height: 200px;
  padding: 16px;
}
</style>

